﻿@import "_mixin";

html {
    font-size: 312.5%;
}

html,
body {
    height: 100%;
    font-family: "Microsoft YaHei","Helvetica Neue",Arial, HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif;
    background-color: #000;
}

a {
    -webkit-tap-highlight-color: transparent;
}

#main {
    position: relative;
    height: 100%;
    overflow: hidden;
}

#tips {
    display: none;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.8);
    .tips-cont {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        .translate(-50%, -50%);
        i {
            display: block;
            margin: 0 auto;
            width: 1.65rem;
            height: 1.74rem;
            background: url("../img/i_tips.png") no-repeat;
            background-size: 1.65rem 1.74rem;
        }
        span {
            display: block;
            margin-top: .2rem;
            font-size: .3rem;
            text-align: center;
            color: #fff;
        }
    }
}

#loading {
    z-index: 7;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-image: url(../img/bg_default.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 7.5rem 12.18rem;
    .loading-line{
        position: absolute;
        // top: 3.93rem;
        top: 50%;
        transform: translate(0 ,-50%);
		margin-top: -0.285rem;
		left: 3.41rem;
        width: .84rem;
        height: 3.67rem;
        // background:url(../img/loading/loading_00109.png) no-repeat;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 8;
        .transition(opacity .3s);
    }
    .btn-enter {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        // bottom: 1.2rem;
        padding:.3rem;
        margin-left: .07rem;
        width: 2rem;
        text-decoration: none;
        .translate(-50%, -50%);
        margin-top: 4.5rem;
        i {
            display: block;
            margin: 0 auto;
            width: 1.25rem;
            height: 1.22rem;
            background: url("../img/b_enter.png") no-repeat;
            background-size: 1.25rem 1.22rem;
        }
        span {
            display: block;
            font-size: .24rem;
            text-align: center;
            color: #7e745e;
        }
    }
    .progress-text {
        display: none;
        position: absolute;
        top: 8.7rem;
        left: 0;
        width: 100%;
        font-size: .3rem;
        font-weight: bold;
        text-align: center;
        color: #fff;
    }
    .progress-1,
    .progress-2,
    .progress-3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
    .logo-light-wrap{
        position: absolute;
        width: 2.76rem;
        height: 2.2rem;
        left: 50%;
        top: 50%;
        margin-top: 1.84rem;
        margin-left: -1.29rem;
        .logo-light{
            opacity: 0;
            background: url("../img/light.png") no-repeat;
            background-size: contain;
            position: absolute;
            left: 0;
            top: 0;
            width: 2.76rem;
            height: 2.2rem;
        }
        &.ani{
            .logo-light{
                .animation(flash 1.5s .6s linear infinite);
            }
        }
        &.ani2{
            .al1{
                .animation(flash2 1.5s linear infinite both);
            }
            .al2{
                .animation(flash2 1.5s .2s linear infinite both);
            }
            .al3{
                .animation(flash2 1.5s .4s linear infinite both);
            }
            .ar1{
                .animation(flash2 1.5s linear infinite both);
            }
            .ar2{
                .animation(flash2 1.5s .2s linear infinite both);
            }
            .ar3{
                .animation(flash2 1.5s .4s linear infinite both);
            }
        }
        .arr{
            opacity: 0;
            position: absolute;
            background: url("../img/arr.png") no-repeat;
            background-size: contain;
            width: .65rem;
            height: .73rem;
            top: 0;
            
            &.al1{
                top: 50%;
                right:-.7rem;
                .transform(translate(-50%, -50%));
            }
            &.al2{
                top: 50%;
                right: -.5rem;
                .transform(translate(-50%, -50%) scale(.8));
            }
            &.al3{
                top: 50%;
                right: -.3rem;
                .transform(translate(-50%, -50%) scale(.6));
            }
            &.ar1{
                top: 50%;
                left:-.1rem;
                .transform(translate(-50%, -50%) rotate(180deg));
            }
            &.ar2{
                top: 50%;
                left: .1rem;
                .transform(translate(-50%, -50%) scale(.8) rotate(180deg));
            }
            &.ar3{
                top: 50%;
                left: .3rem;
                .transform(translate(-50%, -50%) scale(.6) rotate(180deg));
            }
        }
    }
    // .progress-1 {
    //     opacity: 1;
    //     background-image: url("../img/loading1.png");
    //     background-size: 7.5rem 183rem;
    // }
    // .progress-2 {
    //     opacity: 0;
    //     background-image: url("../img/loading2.png");
    //     background-size: 7.5rem 109.8rem;
    // }
    .progress-3 {
        background-image: url("../img/bg_start.jpg");
        background-size: 7.5rem 12.18rem;
        background: none;
        opacity: 0;
        .transition(opacity .2s);
    }
    // &.show {
    //     .progress-1 {
    //         opacity: 0;
    //     }
    //     .progress-2 {
    //         opacity: 1;
    //     }
    // }
    &.go {
        .progress-3 {
            opacity: 1;
        }
        .loading-line{
            // opacity: 0;
            opacity: 1;
        }
    }

}

#player {
    display: none;
    z-index: 9;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#video {
    background-color: #000;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
    width: 0;
    opacity: 0;
    pointer-events: none;
}

#end {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 11;
    height: 100%;
    background: url("../img/bg_end.jpg") 50% 50% no-repeat;
    background-size: 7.5rem 12.18rem;
    .bg {
        width: 100%;
        height: 100%;
        background: url("../img/bg_end.jpg") 50% 50% no-repeat;
        background-size: 7.5rem 12.18rem;
        opacity: 0;
        // .transition(opacity 1.5s);
    }
    .end_slogan1 {
        position: absolute;
        top: 4.2rem;
        left: 50%;
        width: 4.12rem;
        height: 1.68rem;
        // background: url("../img/end_slogan1.png") no-repeat;
        background-size: contain;
        .translate(-50%, 0);
        opacity: 0;
        .transition(opacity 1s .8s);
    }
    .end_slogan2 {
        position: absolute;
        top: 6.4rem;
        left: 50%;
        width: 4.04rem;
        height: .65rem;
        // background: url("../img/end_slogan2.png") no-repeat;
        background-size: contain;
        .translate(-50%, 0);
        opacity: 0;
        .transition(opacity 1.3s 1.1s);
    }
    .btn {
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: 2.5rem;
        width: 100%;
        height: .7rem;
        font-size: 0;
        text-align: center;
        .translate(0, 150%);
        .transition(transform 1s);
        a {
            display: inline-block;
            margin: 0 .35rem;
            width: 1.66rem;
            height: .69rem;
            background-repeat: no-repeat;
            background-size: 1.66rem .69rem;
            opacity: 0;
            &.btn-1{
                .transition(opacity 1s .5s);
            }
            &.btn-2{
                .transition(opacity 1s .5s);
            }

            &:focus{
                outline:none;
            }
        }
        &-1 {
            background-image: url("../img/replay_btn.png");
        }
        &-2 {
            background-image: url("../img/share_btn.png");
        }
    }
    &.show {
        display: block;
        .bg {
            // .end();
            // .animation(end 20s linear infinite);
            opacity: 1;
        }
        .end_slogan1,.end_slogan2 {
            // opacity: 1;
        }
        .btn {
            .translate(0, 0);
            a {
                opacity: 1;
            }
        }
    }
}

#share {
    display: none;
    z-index: 28;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.8);
    // background-image: url("../img/share_step.png");
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 7.5rem 61rem;
    .share();
    // .animation(share 1s steps(5) infinite);
    .share-text {
        position: absolute;
        top: 1.3rem;
        left: .3rem;
        width: 3.95rem;
        height: 2.55rem;
        // background: url("../img/share_text.png") no-repeat;
        background-size: 3.95rem 2.55rem;
    }
    .canvas-wrap,img{
        width: 7.5rem;
        height: 12.18rem;
        position: absolute;
        top:50%;
        left: 50%;
        margin-left: -3.75rem;
        margin-top: -6.09rem;
        display: block;
    }
}

.end(){
    .keyframes(end);
    .-frames(@-...){
    0%, 100% {
        .scale(1);
    }
    50% {
        .scale(1.1);
    }
}
}
.share(){
    .keyframes(share);
    .-frames(@-...){
    0% {
        background-position-y: 0;
    }
    100% {
        background-position-y: -61rem;
    }
}
}
.flash(){
    .keyframes(flash);
    .-frames(@-...){
        0%, 100% {
            .opacity(0);
        }
        50% {
            .opacity(100);
        }
    }
}
.flash2(){
    .keyframes(flash2);
    .-frames(@-...){
        0%{
            .opacity(100);
        }
        50% {
            .opacity(0);
        }
        100% {
            .opacity(0);
        }
    }
}
.flash();
.flash2();